/* eslint-disable vue/valid-v-for */
<template>
  <div class="app-container">
    <!--搜索条件-->
    <div class="filter-container">
      <el-row :gutter="13" type="flex">
        <!-- @blur="searchSku" -->
        <el-col :span="4">
          <el-input v-model="search" placeholder="输入品类名称查询"/>
        </el-col>

        <el-col :span="1">
          <el-button type="primary" @click="searchSku">查询</el-button>
        </el-col>
        <el-col :span="1">
          <el-button type="primary" @click="addFun">新增</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- v-loading="listLoading" -->
    <div class="table-ymm">
      <el-table :data="skuList" border highlight-current-row style="width: 95%;">
        <el-table-column prop="categoryName" label="品类" min-width="5%"/>
        <el-table-column prop="brandName" label="创建时间" min-width="8%">
          <template slot-scope="scope">
            <span>{{ scope.row.createDatetime |parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="3%">
          <template slot-scope="scope">
            <el-button type="primary" size="small" icon="el-icon-edit" @click="edictFun(scope)">编辑</el-button>
            <el-button type="primary" size="small" icon="el-icon-delete" @click="open(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页-->
    <div class="pagination-container">
      <el-pagination
        v-show="total>0"
        :current-page="listQuery.page"
        :page-sizes="[10,20,30, 50]"
        :page-size="listQuery.pageSize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <component
      :is="modal"
      :modal-data="modalData"
      :modal-static-data="{closeChildAndRefresh}"
      @close="closeChild"
    />
  </div>
</template>

<script>
import { get, post } from '@/api/utils'
import Add from './dialog/wxhCategory.vue'
import { getUserInfo } from '@/api/login'
export default {
  data() {
    return {
      selectSortValue: null,
      selectStatusValue: null,
      search: '',
      dialogFormVisible: false,
      skuList: [],
      total: 1,
      listLoading: true,
      offset: 0,
      limit: 10,
      listQuery: {
        page: 1,
        pageSize: 10,
        keyword: null,
        starTime: null,
        endTime: null,
        shipmentNo: null,
        time: null,
        pageNumber: null
      },
      modal: null,
      modalData: {}
    }
  },
  created() {
    this.getPermission()
    this.getSkuList()
  },

  methods: {
    getSkuList() {
      this.listLoading = true
      this.listQuery.pageNumber =
        (this.listQuery.page - 1) * this.listQuery.pageSize

      var data = {
        offset: this.listQuery.pageNumber,
        limit: this.listQuery.pageSize
      }
      if (this.search !== null) {
        data.search = this.search
      }

      get('/wxh-cloud-rest/rest/', '/pas/sku/categorylist', data)
        .then(response => {
          if (response.data.status === 'success') {
            this.total = response.data.data.count
            this.skuList = response.data.data.list
            this.listLoading = false
          } else if (response.data.status === 'token_check_faild') {
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
            this.listLoading = false
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '数据加载失败',
            type: 'warning'
          })
          this.listLoading = false
        })
    },

    selectSort(event) {
      this.selectSortValue = event
      this.listQuery.page = 1
      this.getSkuList()
    },
    selectStatus(event) {
      this.selectStatusValue = event
      this.listQuery.page = 1
      this.getSkuList()
    },

    searchSku(event) {
      // console.log(event)
      this.listQuery.page = 1
      this.getSkuList()
      // this.getSkuList()
    },

    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getSkuList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getSkuList()
    },

    addFun() {
      this.modalData = { type: 'add' }
      this.modal = Add
    },
    edictFun(data) {
      var sku = data.row
      this.modalData = { type: 'edict', sku }
      this.modal = Add
    },
    closeChild() {
      this.modal = null
    },
    closeChildAndRefresh() {
      this.modal = null
      this.listQuery.page = 1
      this.getSkuList()
    },
    open(data) {
      this.$confirm('删除该品类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deletecategory(data)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    deletecategory(datas) {
      var data = { 'categoryId': datas.row.categoryId, 'deleteFlag': 'Y' }
      post('/wxh-cloud-rest/rest/', '/pas/sku/wxhCategory', data)
        .then(response => {
          if (response.data.status === 'success') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getSkuList()
          }
        })
    },

    getPermission() {
      var arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下

      for (var i = 0; i < arr.length; i++) {
        var arr2 = arr[i].split('=') // 再次切割
        // 判断查找相对应的值
        if (arr2[0] === 'sidebarStatus') {
          this.userid = arr2[1]
        }
      }

      if (localStorage.getItem(this.userid)) {
        return
      }

      getUserInfo().then(response => {
        if (response.data.status === 'ok') {
          localStorage.setItem(
            this.userid,
            JSON.stringify(response.data.data.permissions)
          )
        }
      })
    },

    checkPermission(value) {
      if (value) {
        if (localStorage.getItem(this.userid) && localStorage.getItem(this.userid).indexOf(value) >= 0) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    }
  }
}
</script>
